//滚动条
function scrollBar(id) {
	var scrollWrap = document.querySelector(id + ' .scroll'),
		content = document.querySelector(id + ' .scrollContent'),
		barWrap = document.querySelector(id + ' .scrollBar'),
		bar = document.querySelector(id + ' .scrollBar span');

	//初始化
	bar.style.transform = content.style.transform = 'translateY(0)';
	barWrap.style.display = 'block';
	bar.style.transition = content.style.transition = null;

	//设置滑块的高度
	var multiple = content.offsetHeight / scrollWrap.offsetHeight; //内容的高度是父级高度的倍数
	if (multiple <= 1) {
		//这个条件成立说明内容的高度没有父级的高度大，就不需要滚动条了
		barWrap.style.display = 'none';
		//滚轮取消滚动功能
		scrollWrap.onwheel = null;

		multiple = 1;
		return; //没有出现滚动条后面的代码就不需要走了
	}

	multiple = multiple > 20 ? 20 : multiple;   //设置一个最大的倍数，超过的话也按这个倍数来
	bar.style.height = scrollWrap.offsetHeight / multiple + 'px';


	//滑块拖拽
	var scrollTop = 0;    //滚动条走的距离
	var maxHeight = barWrap.offsetHeight - bar.offsetHeight;    //滑块能走的最大距离
	bar.onmousedown = function (ev) {
		var startY = ev.clientY;  //鼠标按下时的坐标
		var startT = parseInt(this.style.transform.split('(')[1]);    //鼠标按下时滑块已经走的距离    'translateY(0px)'    ['translateY','0px)']    '0px)' 0

		bar.style.transition = content.style.transition = null;

		document.onmousemove = ev => {
			scrollTop = ev.clientY - startY + startT; //滚动条走的距离=鼠标移动时的坐标-按下时鼠标的坐标+按下时滑块的位置
			scroll();
		};

		document.onmouseup = () => document.onmousemove = null;

		ev.preventDefault();    //阻止拖拽的时候文本被选中
		ev.stopPropagation();   //滑块与滑块的父级都有down事件，需要阻止 
	}

	//滚动条的主体
	function scroll() {
		if (scrollTop < 0) {
			scrollTop = 0;
		}
		if (scrollTop > maxHeight) {
			scrollTop = maxHeight
		}

		var scaleY = scrollTop / maxHeight; //当前滑块走的比例
		bar.style.transform = 'translateY(' + scrollTop + 'px)';
		content.style.transform = 'translateY(' + (scrollWrap.offsetHeight - content.offsetHeight) * scaleY + 'px)';
	}

	//滑块父级点击功能
	barWrap.onmousedown = ev => {
		/*
			getBoundingClientRect()     返回元素的盒模型信息
			{
				left:0,
				top:0,
				right:0,
				bottom:0,
				width:0,
				height:0
			} 
		 */
		scrollTop = ev.clientY - barWrap.getBoundingClientRect().top - bar.offsetHeight / 2;    //滑块的中心点走到点击的位置 
		bar.style.transition = content.style.transition = '.3s';
		scroll();
	}

	//滚轮功能
	scrollWrap.onwheel = ev => {
		bar.style.transition = content.style.transition = '.2s';
		// console.log(ev.deltaY)   滚轮走的方向
		ev.deltaY > 0 ? scrollTop += 20 : scrollTop -= 20;
		scroll();
		ev.preventDefault();
	}
}
//scrollBar('#yearBox');


//无缝滚动轮播图
function carousel(wrap) {
	var ul = wrap.querySelector('.carouselInner'),
		carouselIndicators = wrap.querySelector('.carouselIndicators'),
		lis = ul.children,	//动态获取所有的li标签
		spans = [],	//所有的小圆点
		btns = wrap.querySelectorAll('.btn'),
		boxWidth = wrap.offsetWidth;	//一个li标签的宽度

	var cn = 0,	//当前图片的索引
		ln = 0,	//上一个图片的索引
		canClick = true;	//用户是否可以进行下次点击，true(可以)，false（不可以）

	//复制最后一个li添加到末尾
	var head = ul.firstElementChild.cloneNode(true);	//克隆第一个子元素
	ul.appendChild(head);
	ul.style.width = lis.length * boxWidth + 'px';

	//圆点功能
	if (carouselIndicators) {
		carouselIndicators.innerHTML = '';
		for (let i = 0; i < lis.length - 1; i++) {	//要把克隆的子元素排除掉
			var span = document.createElement('span');
			span.className = i ? '' : 'active';

			spans.push(span);

			span.onclick = () => {
				if (!canClick) {	//条件成立说明不能进行下次点击
					return;
				}

				cn = i;	//这里能使用i是因为循环用了let
				move();
			}

			carouselIndicators.appendChild(span);
		}
	}

	//滚动
	function move() {
		canClick = false;	//图片还没有到达指定位置 ，用户不能进行下次点击

		ul.style.transition = '.3s';
		ul.style.transform = 'translateX(' + -cn * boxWidth + 'px)';

		//同步圆点
		/*
			li的cn: 	0 1 2 3
			圆点索引： 	 0 1 2 0
			cn%(lis.length - 1)
		 */

		if (spans.length) {
			var hn = cn % (lis.length - 1);
			spans[ln].className = '';
			spans[hn].className = 'active';

			ln = hn;	//当前次想对于下一次来讲就是上一次。当前的索引想对于下一次滚动来讲就是上一次的索引
		}
	}
	//自动播放
	function autoPlay() {
		cn++;
		if (cn > lis.length - 1) {	//限制cn的值走超啦！！！
			cn = 0;
		}

		move();
	}
	clearInterval(wrap.timer);
	wrap.timer = setInterval(autoPlay, 3000);

	//修改ul的位置 
	ul.addEventListener('transitionend', () => {
		if (cn >= lis.length - 1) {	//条件成立说明走到了最后一张图片
			ul.style.transform = 'translateX(0)';
			ul.style.transition = null;
			cn = 0;
		}

		canClick = true;	//图片已经到达指它位置，用户可以进行下次点击
	});

	//鼠标移入清除定时器
	wrap.onmouseenter = () => clearInterval(wrap.timer);
	wrap.onmouseleave = () => wrap.timer = setInterval(autoPlay, 3000);

	//左右箭头点击
	if (btns.length) {
		//左
		btns[0].onclick = () => {
			if (!canClick) {	//条件成立说明不能进行下次点击
				return;
			}

			//如果当前是第一张图，就需要把图片拉到最后一张，左边才不会出现空白
			if (cn == 0) {
				cn = lis.length - 1;
				ul.style.transform = 'translateX(' + -cn * boxWidth + 'px)';
				ul.style.transition = null;
			}

			//因为move里的transition不能与上面条件里的transition同时执行，所以使用一个定时器，代码变成了异步，代码会在下一次的Event Loop里执行
			setTimeout(() => {
				cn--;
				move();
			});
		};

		//右
		btns[1].onclick = () => {
			if (!canClick) {	//条件成立说明不能进行下次点击
				return;
			}

			cn++;
			move();
		};
	}

	//可见性改变事件
	document.addEventListener('visibilitychange', () => {
		//console.log(document.hidden);
		/* 
			document.hidden
				true	页面隐藏
				false	页面显示
		 */
		if (document.hidden) {
			clearInterval(wrap.timer);
		} else {
			wrap.timer = setInterval(autoPlay, 3000);
		}
	});
}
//carousel(document.querySelector('#section6 .carousel'));


//选项卡
function tab(father) {
	var btns = father.querySelectorAll('.tab li:not(.more)'),
		contents = father.querySelectorAll('.tabContent');

	var ln = 0;	//上一次选中的元素的索引

	for (let i = 0; i < btns.length; i++) {
		btns[i].onclick = function () {
			btns[ln].classList.remove('active');
			this.classList.add('active');

			contents[ln].classList.remove('active');
			contents[i].classList.add('active');

			ln = i;
		}
	}
}
//tab(document.querySelector('#section4 .left'));

